<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐视-注册</title>
    <link rel="stylesheet" href="./scss/register.css">
    <link rel="stylesheet" href="../图标图标/iconfont.css">
</head>

<body>
    <!-- 头部LOGO -->
    <header>
        <p><img src="./images/login.png" alt=""></p>
        <ul>
            <li>语言：<span>简体中文</span></li>
            <li>国家/地区：<span>中国</span></li>
            <li>帮助</li>
        </ul>
    </header>
    <!-- 注册版面 -->
    <section>
        <main>
            <p><span>注册</span><a target="_blank" href="./login.html">立即登录</a></p>
            <nav>
                <p>
                    <span class="iconfont icon-wode"></span>
                    <input type="text" id="username" placeholder="手机号" autocomplete="off">
                </p>
                <p>
                    <span class="iconfont icon-anquanshezhi"></span>
                    <input type="password" id="password" placeholder="密码">
                            
                </p>
                <p>
                    <span class="iconfont icon-jianpan"></span>
                    <input type="text" id="rpassword" placeholder="输入验证码，点击图片更换">                  
                </p>
                <div class="vercode">
                    <p>
                        <span class="iconfont icon-xinxi"></span>
                        <input type="text" id="nickname" placeholder="6位验证码"> 
                    </p>
                   
                    <input type="text" value="获取验证码">                   
                </div>
                <input type="checkbox" id="agree">&nbsp;我已阅读并同意&nbsp;<a>乐视用户协议</a>
                <input type="button" value="注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册" id="Btn">
            </nav>
        </main>

    </section>
    
    <script>
        var btn = document.getElementById("Btn");
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        var rpassword = document.getElementById("rpassword");
        var nickname = document.getElementById("nickname")

        btn.onclick = async function(){
            // 发起请求先明确几件事情 : 
            // - 1. 请求路径 ; 
            // - 2. 请求方式; 
            // - 3. 请求参数 ; 
            let url = "http://127.0.0.1:8888/users/register" ;
            let options = {
                method : "POST" ,
                headers : {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body:`username=${username.value}&password=${password.value}&rpassword=${rpassword.value}&nickname=${nickname.value}`
            };
            let response = await fetch( url , options );
            let data = await response.json();
            console.log( data );
            // 注册结束之后转到登录页面
            if( data.code === 1 ){
                alert("注册成功，马上跳转到登录页面");
                setTimeout( function(){
                    location.href = "./login.html"
                } , 2000)
            }else{
                alert(data.message)
            }
        }
    </script>

</body>

</html>